<template>
  <div>
    <base-page ref="basePage" :basepage="basePage"></base-page>
    <el-dialog title="物流操作" :visible.sync="dialogFormVisible" v-dialogDrag append-to-body>
      <el-form :inline="true" :model="logistics" class="demo-form-inline">
        <el-form-item label="请选择物流状态">
          <el-select v-model="logistics.state" placeholder="请选择物流状态">
            <el-option label="已发货" value="1"></el-option>
            <el-option label="运输中" value="2"></el-option>
            <el-option label="派件中" value="3"></el-option>
            <el-option label="派件完成" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="logistics.remark" placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="define()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import BasePage from "../BasePage.vue";
export default {
  components: {
    "base-page": BasePage,
  },
  data() {
    return {
      basePage: {
        // URL
        url: "ordersOperation",
        // 查询条件
        searchConf: [
          [
            {
              title: "书名",
              type: "input",
              prop: "bookName",
            },
            {
              title: "状态",
              type: "select",
              prop: "state",
              data:[
                  {
                      label:"已支付",
                      value:"0",
                  },
                  {
                      label:"已发货",
                      value:"1",
                  },
                                    {
                      label:"已收货",
                      value:"2",
                  },
                                    {
                      label:"完成",
                      value:"3",
                  }
              ],
            },
          ],
        ],
        buttonConf: {
          insertShow: false,
          deleteShow: false,
        },
        // table列
        tableColumnConf: {
          columns: [
            { prop: "bookName", label: "书籍名称" },
            { prop: "userName", label: "购买人" },
            { prop: "num", label: "购买数量" },
            { prop: "price", label: "支付金额" },
            { prop: "address", label: "收获地址" },
            { prop: "createTime", label: "创建时间" },
            { prop: "logisticsState", label: "最新物流状态" },
            { prop: "logisticsRemark", label: "物流详情" },
            { prop: "state", label: "状态" },
          ],
          operation: {
            state: true,
            alter: false,
            defs: [
              {
                event: "logistics",
                name: "物流",
              },
            ],
          },
        },
        detailConf: {
          title: "",
          data: [],
        },
        // 新增修改form表单设置
        formConf: {
          formData: {},
          width: "50%",
          title: "",
          data: [],
          rules: {},
        },
      },
      dialogFormVisible: false,
      row: {},
      logistics: {
        state: "",
        remark: "",
      },
    };
  },
  methods: {
    define() {
      var user = JSON.parse(localStorage.user);
      this.logistics.createBy = user.id;
      this.logistics.orderId = this.row.id;
      this.COMMON.httpPost(
        this,
        "logisticsOperation/insert",
        this.logistics,
        (result) => {
          if (result.result === "SUCCESS") {
            this.dialogFormVisible = false;
            this.$refs.basePage.getPage();
            this.logistics = {};
          }
        },
        (result) => {}
      );
    },
    operation(row, event) {
      switch (event) {
        case "logistics": {
          this.dialogFormVisible = true;
          this.row = row;
          break;
        }
      }
    },
    event(event) {
      switch (event) {
      }
    },
    selectChange(type, pro, value) {},
    formatter(data, prop, index) {
      switch (prop) {
        case "state": {
          switch (data) {
            case "0":
              return "已支付";
            case "1":
              return "已发货";
            case "2":
              return "已收货";
            case "3":
              return "完成";
          }
        }
        case "logisticsState": {
          switch (data) {
            case "0":
              return "待发货";
            case "1":
              return "已发货";
            case "2":
              return "运输中";
            case "3":
              return "派件中";
            case "4":
              return "派件完成";
          }
        }
        default: {
          return data;
        }
      }
    },
  },
  activated: function () {},
};
</script>
<style>
</style>